{% extends "_layouts/examples.html" %}
{% block title %}Forms / Tick elements{% endblock %}

{% block content %}

<div class="p-strip">
  <div class="p-strip is-shallow u-no-padding--top">
    <div class="row">
    </div>
    <div class="row">
      <div class="col-3">
        <form>
          <label class="p-checkbox">
            <input type="checkbox" aria-labelledby="checkboxExample0" class="p-checkbox__input">
            <span class="p-checkbox__label" id="checkboxExample0">Checkbox option 0</span>
          </label>
          <label class="p-radio">
            <input type="radio" aria-labelledby="radioLabel0" class="p-radio__input" checked>
            <span class="p-radio__label" id="radioExample0">Checkbox option 0</span>
          </label>
        </form>
      </div>
      <div class="col-3">
        <form>
          <input type="text">
          <button>Button</button>
          <button class="p-button">Button</button>
          <button class="p-button--negative">Button</button>
          <a class="p-button--negative">Button</a>
          <button class="p-button--positive">Button</button>
          <button class="p-button--positive" disabled>Button</button>
          <button>Button</button>
          <button disabled>Button</button>
          <button class="p-button--negative"><i class="p-icon--success"></i></button>
          <button class="p-button--positive"><i class="p-icon--success"></i></button>
        </form>
      </div>
      <div class="col-3">
        <form>
          <input type="text">
          <label class="p-checkbox">
            <input type="checkbox" aria-labelledby="checkboxExample1" class="p-checkbox__input" checked>
            <span class="p-checkbox__label" id="checkboxExample1">Checkbox option 1</span>
          </label>
        </form>
      </div>
      <div class="col-3">
        <form>
          <input name="email" type="email" placeholder="Enter email" autocomplete="email">
          <select></select>
        </form>
      </div>
      <div class="col-3">
        <label class="p-checkbox">
          <input type="checkbox" aria-labelledby="checkboxExample2" class="p-checkbox__input">
          <span class="p-checkbox__label" id="checkboxExample2">Checkbox option 2</span>
        </label>

        <label class="p-radio">
          <input type="radio" aria-labelledby="radioExample1" class="p-radio__input" checked>
          <span class="p-radio__label" id="radioExample1">Radio option 1</span>
        </label>

        <label class="p-radio">
          <input type="radio" aria-labelledby="radioExample2" class="p-radio__input">
          <span class="p-radio__label" id="radioExample2">Radio option 2</span>
        </label>
      </div>
      <div class="col-3">
        <label class="p-radio">
          <input type="radio" aria-labelledby="radioExample3" class="p-radio__input">
          <span class="p-radio__label" id="radioExample3">Radio option 3</span>
        </label>

        <label class="p-radio">
          <input type="radio" aria-labelledby="radioExample4" class="p-radio__input">
          <span class="p-radio__label" id="radioExample4">Radio option 4</span>
        </label>

        <label class="p-checkbox">
          <input type="checkbox" aria-labelledby="checkboxExample3" class="p-checkbox__input" checked>
          <span class="p-checkbox__label" id="checkboxExample3">Checkbox option 3</span>
        </label>

        <label class="p-checkbox">
          <input type="checkbox" aria-labelledby="checkboxExample4" class="p-checkbox__input">
          <span class="p-checkbox__label" id="checkboxExample4">Checkbox option 4</span>
        </label>
      </div>
    </div>
  </div>
  <div class="p-strip is-shallow u-no-padding--top">
    <div class="row">
      <hr />
      <p>In padded containers (table cells, some list items), checkboxes and labels need to align with text not wrapped in a tag. Use <code>.p-checkbox--inline</code> or <code>.p-radio--inline</code> elements to achieve that.</p>
    </div>
  </div>
</div>

<div class="p-strip is-shallow u-no-padding--top">
  <div class="u-fixed-width">
    <table aria-label="Example of a table that is rendered as a series of cards on small screens" class="p-table--mobile-card">
      <thead>
        <tr>
          <th>
            <form>
              <label class="p-checkbox--inline">
                <input type="checkbox" aria-labelledby="checkboxExample5" class="p-checkbox__input" checked>
                <span class="p-checkbox__label" id="checkboxExample5">Label</span>
              </label>
            </form>
          </th>
          <th>Power</th>
          <th>Status</th>
          <th>Owner | Pool</th>
          <th class="u-align--right">Cores</th>
          <th class="u-align--right">RAM(GB)</th>
          <th class="u-align--right">Disks</th>
          <th class="u-align--right">Storage(GB)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th data-heading="FQDN | MAC">
            <form>
              <label class="p-checkbox--inline">
                <input type="checkbox" aria-labelledby="checkboxExample6" class="p-checkbox__input" checked>
                <span class="p-checkbox__label" id="checkboxExample6">label</span>
              </label>
            </form>
          </th>
          <td data-heading="Power">Off</td>
          <td data-heading="Status">Ready</td>
          <td data-heading="Owner | Pool">Maria</td>
          <td data-heading="Cores" class="u-align--right">8</td>
          <td data-heading="RAM(GB)" class="u-align--right">16</td>
          <td data-heading="Disks" class="u-align--right">2</td>
          <td data-heading="Storage(GB)" class="u-align--right">2</td>
        </tr>
        <tr>
          <th data-heading="FQDN | MAC">
            <form>
              <label class="p-radio--inline">
                <input type="radio" aria-labelledby="radioExample5" class="p-radio__input" checked>
                <span class="p-radio__label" id="radioExample5">label</span>
              </label>
            </form>
          </th>
          <td data-heading="Power">Off</td>
          <td data-heading="Status">Ready</td>
          <td data-heading="Owner | Pool">Maria</td>
          <td data-heading="Cores" class="u-align--right">8</td>
          <td data-heading="RAM(GB)" class="u-align--right">16</td>
          <td data-heading="Disks" class="u-align--right">2</td>
          <td data-heading="Storage(GB)" class="u-align--right">2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
